@charset "utf-8";
/**
 * Created by younger on 2016/03/15.
 */

// 头部
//========================
@at-root {
  $color: $navMainColor;
  $collapseColor: black;
  $navHeight: 48px;
  $gridPadding: 13px; //设置每个的宽度
  $hoverColor: white; //字体颜色
  //背景色
  .header {
    background-color: $headerColor; //logo和主导航的背景颜色
    border-bottom: 1px solid white;
    @extend %mb;

    .main-nav-warp {
      border-bottom: 1px solid lighten(black, 80);
    }
  }

  //
  //顶导航，面包屑导航
  //=========================
  @include breadcrumb($padding: 10px);
  .nav-top {
    //继承面包屑导航
    @extend %breadcrumb;

    font-size: 1.084*$fontSize; //要13号字体
    line-height: $navTopHeight;
    text-transform: capitalize;

    a {
      color: $hoverColor;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  //顶导航设置背景色
  .top-nav-warp {
    background-color: $navTopColor;
  }

  //=========================
  //主导航
  //=========================
  .main-nav-warp {
    padding-bottom: 18px;
    border-bottom: lighten(black, 0);
  }

  .nav-main {
    @extend %clearfix;

    border: 1px solid darken($color, 2);
    background-color: lighten($color, 10);
    white-space: nowrap; //禁止换行

    a {
      display: block;
      padding: 0 52px;
      font-size: 1.34*$fontSize; // 要的是16px字体
      color: white;
      text-transform: capitalize; //英文头字母大写
    }
    a:hover {
      text-decoration: none;
    }

    > li {
      @extend %fl;
      line-height: $navHeight; //导航高度
      border-left: 1px solid darken($color, 2);

      //左和上添加border
      > a {
        border: 1px solid lighten($color, 20);
        border-bottom: none;
        border-right: none;
      }
      > a:hover {
        text-decoration: none;
        box-shadow: 0 0 30px 0 darken($color, 2) inset;
      }
    }
    > li:first-child {
      border: none;

      > a {
        border-left: none;
      }
    }

    //=========================
    //坍塌菜单样式
    //=========================
    $collapseBg: lighten($collapseColor, 25);
    $collapseTriangleSize: 10px;

    .collapse-menu {
      padding-top: $collapseTriangleSize; //填补三角形的位置

      //填完border分割li
      > li {
        background-color: $collapseBg;
        box-shadow: 2px 2px 1px 1.5px lighten($collapseColor, 40);
        border-top: 1px solid lighten($collapseColor, 40);
        border-bottom: 1px solid lighten($collapseColor, 9);
      }
      > li:first-child {
        border-top: none;
      }
      > li:last-child {
        border-bottom: none;
      }
      a:hover {
        color: lighten($collapseColor, 80);
      }
    }
    .collapse-menu:before { //为坍塌组件添加三角形修饰
      @include triangle($collapseTriangleSize, $collapseBg); //三角形
      top: -10px;
      left: 10%;
    }
  }
}
